<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/js/jquery-1.11.1.min.js"></script>
<link href="${APP_PATH}/js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/My97DatePicker/WdatePicker.js"></script>
<script src="${APP_PATH}/js/echarts.js"></script>
<script type="text/javascript" src="${APP_PATH}/laypage/laypage.js"></script>
</head>
<body>
	<!-- 模态框：客户构成统计 -->
	<div class="modal fade" id="myChart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">客户构成统计</h4>
	      </div>
	      <div class="modal-body" id="main" style="width: 600px;height:400px;">
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
	    </div>
	  </div>
	</div>
	
	
	
	<!-- 主页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h4>客户构成统计</h4>
			</div>
		</div>
		<hr/>
		<!-- 模糊查询栏 -->
		<div class="row">
			<label class="col-md-1.5 col-md-offset-4">月份：</label>
		    <input type="text" name="gthireDate"  class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M',dateFmt:'yyyy-MM'})" />
		    <input class="btn btn-info" type="button" id="customer_check_like_btn" value="查询">
		</div>
		<p id="timeFresh" style="font-size: 10px;"></p>
		<hr/>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-10">
				<input class="btn btn-info" type="button" id="chart_check_modal_btn" value="查看" /> 
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<table class="table table-bordered" id="customer_table">
				<thead>
					<tr class="info">
						<td></td>
						<td></td>
						<td>客户数量</td>
						<td>月份</td>
						<td>同比</td>
						<td>环比</td>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
	
	<script type="text/javascript">
		
		$(function(){
			show_message();
		})
		
		//解析数据
		function show_message(curr){
			$.ajax({
				url:"${APP_PATH}/listCountByMonth",
				data:{"pn":curr},
				type:"get",
				success:function(result){
					//1、页面加载完成后，直接发送ajax请求，要到返回的数据
					build_customer_table(result);
					
				}
			})
		}
		
		//表格数据的解析方法
		function build_customer_table(result){
			console.log(result);
			//构建之前先清空数据
			$("#customer_table tbody").empty();
			var customers = result.extend.pageInfo.list;
			$.each(customers,function(index,item){
				var indexTd = $("<td></td>").append(index+1);
				var checkBoxTd = $("<td><input type='radio' name='optionsRadios' class='check_item'></td>");
				var customersTd = $("<td></td>").append(item.countCustomer);
				var monthTd = $("<td></td>").append(item.month+"月");
				var yearToYearTd = $("<td></td>").append("同比");
				var monthToMonthTd = $("<td></td>").append("环比");
				
				
				$("<tr></tr>").append(indexTd)
							.append(checkBoxTd)
							.append(customersTd)
							.append(monthTd)
							.append(yearToYearTd)
							.append(monthToMonthTd)
							.appendTo("#customer_table tbody");
			})
			$("<tr><td id='page' colspan='9' style='text-align:center;vertical-align:middle;'></td></tr>").appendTo("#customer_table tbody");
			//laypage分页
			laypage({
				cont:$("#page"),//容器
				pages:result.extend.pageInfo.pages, //总页数
				curr:result.extend.pageInfo.pageNum,//当前页
				skin:'molv',//皮肤
				skip:true,//
				last:'尾页',//
				jump:function(obj,first){
					if(!first){
						console.log(obj.curr);
						show_message(obj.curr);
					}
				}
			})
		}
		
		
		
		//查询模态框弹出事件
		$("#chart_check_modal_btn").click(function(){
			$("#myChart").modal({
				backdrop:"static"
			});
		})
		
		// 时间定时刷新
		$(function() {
			setInterval(flush, 1);
			function flush() {
				var mydate = new Date();
				var t = mydate.toLocaleString();
				$("#timeFresh").text(t);
			}
		});
		
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init($("#main")[0]);
		
		// 指定图表的配置项和数据
		var option = {
		    title : {
		        text: '本月用户访问来源',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
		    },
		    toolbox : {
				show : true,
				feature : {
					mark : {
						show : true
					},
					dataView : {
						show : true,
						readOnly : false
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[
		                {value:335, name:'直接访问'},
		                {value:310, name:'邮件营销'},
		                {value:234, name:'联盟广告'},
		                {value:135, name:'视频广告'},
		                {value:1548, name:'搜索引擎'}
		            ],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		
	</script>
	
</body>
</html>